{% extends 'it/base.html' %}
{% load task %}
{% load paginator %}
{% block title_action %}工单列表{% endblock title_action %}

{% block css_other %}
{% endblock css_other %}

{% block content %}
    <div class="container">
      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h3>工单列表</h3>
            <div class="panel-group" role="tablist">
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="collapseListGroupHeading1">
                    <h4 class="panel-title" style="text-align: center">
                      <a class="btn btn-default" role="button" data-toggle="collapse"
                         href="#collapseListGroup1" aria-expanded="true"
                         aria-controls="collapseListGroup1" style="padding: 5px 60px;">
                        筛选条件
                      </a>
                    </h4>
                  </div>
                  <div id="collapseListGroup1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading1" aria-expanded="true" style="">

                    <form class="form-inline" action="" style="padding: 5px;">
                      {% csrf_token %}
                      <div class="form-group has-feedback">
                        <label>关键词</label>
                        <input type="text" class="form-control" name="keyword"
                               placeholder="工单号/问题/姓名/电话" value="{{ query.keyword }}">
                        <!--删除按钮-->
                        <a class="glyphicon glyphicon-remove btn form-control-feedback"
                           id="del_text"></a>
                      </div>
                      <div class="form-group">
                        <label>状态</label>
                        <select class="form-control" name="status">
                          <option value="">全部(不含已取消)</option>
                            {% for sid,sname in status %}
                                <option value="{{ sid }}"
                                        {% if query.status %}
                                            {{ sid | status_selected:query.status }}
                                        {% endif %}>
                                    {{ sname }}
                                </option>
                            {% endfor %}
                        </select>
                      </div>
                      <button type="submit" class="btn btn-success">查询</button>
                    </form>

                  </div>
                </div>
            </div>
          <table class="table table-condensed table-hover">
              <tr class="bg-info">
                  <th>
                      <input id="ids" onclick="check_all(this,'id')"
                             type="checkbox" class="checkbox" />
                  </th>
                  <th>问题</th>
                  <th>姓名</th>
                  <th>时间</th>
                  <th>状态</th>
                  <th>操作</th>
              </tr>
                <!--背景色分,淡绿:已解决,淡灰:已取消,淡蓝:已接单,无色:新建,淡红:紧急-->
              {% for task in tasks %}
              <tr onclick="check_this(this)">
                  <td>
                      <input id="id" type="checkbox" value="{{ task.id }}"
                             status="{{ task.status }}" />
                      {{ task.id }}
                  </td>
                  <td>{{ task.problem|limit_problem }}</td>
                  <td class="nowrap">{{ task.initiator }}</td>
                  <td>{{ task.how_long }}</td>
                  <td style="background: {{ task.status|bgcolor }}">{{ task.get_status }}</td>
                  <td>
{#                      <a>加急</a>#}
{#                      <a>留言</a>#}
                      <a id="view" href="{% url 'task_view' task.id %}">查看</a>
                      <a id="cancel" class="{{ task.status|cancel_status }}" href="javascript:void(0);">取消</a>
                  </td>
              </tr>
              {% empty %}
                <tr><td>列表为空</td></tr>
              {% endfor %}
          </table>
        <div>
            <!-- 分页 -->
            {% pagination_render tasks %}
        </div>
        <div>
            <!-- 底部按钮 -->
            {% if request.user.is_authenticated %}
            <input id="accept" type="button" class="btn btn-primary" value="受理" />
            <input id="resolved" type="button" class="btn btn-success" value="已解决" />
{#            <input type="button" class="btn btn-info" value="打标签" />#}
{#            <input type="button" class="btn btn-warning" value="不合理的加急" />#}
            {% endif %}
            <a class="btn btn-primary" href="{% url 'task_add' %}">提报工单</a>
        </div>
      </div>

    </div> <!-- /container -->
{% endblock content %}

{% block js_bottom_other %}
    <script type="text/javascript">
        $(function() {
            // 取消
            $('tr td #cancel').click(function () {
                var id = $(this).parents('tr').find('#id').val();
                show_message('是否取消?', {
                    type: 'confirm',
                    callback: function () {
                        $.ajax({
                            url: "{% url 'task_cancel' %}",
                            data: {
                                id: id,
                                verify_code: $('.has-feedback input[name="verify_code"]').val(),
                                captcha_session_key:
                                    $('.has-feedback input[name="captcha_session_key"]').val()
                            },
                            type: 'post',
                            dataType: 'json',
                            success: function (data) {
                                show_message(data.msg, {
                                    callback: function () {
                                        if (data.code > 0) {
                                            // 刷新当前页面
                                            refresh();
                                        }
                                    }
                                });
                            }
                        }); // end
                    },
                    autoclose: false,
                    verify: {
                        open: true,
                        orgurl: "{% url 'common_get_captcha' %}?url_path={{ request.path }}",
                        verifycode: "{% captcha_session_key %}"
                    }
                });
            });

            // 修改工单状态
            function change_status(ids, url) {
                if (ids.length < 1) {
                    show_message('请勾选工单');
                } else {
                    $.ajax({
                        url: url,
                        data: {
                            ids: JSON.stringify(ids)
                        },
                        type: 'post',
                        dataType: 'json',
                        success: function (data) {
                            show_message(data.msg, {
                                callback: function () {
                                    if (data.code > 0) {
                                        // 刷新当前页面
                                        refresh();
                                    }
                                }
                            });
                        }
                    });
                }
            }

            // 受理
            $('#accept').click(function () {
                var ids = new Array();
                var status = new Array();
                $('input#id').each(function () {
                    if ($(this).is(':checked')) {
                        if ($(this).attr('status') == 0) { // 新工单0可以受理
                            ids.push(this.value);
                        } else {
                            status.push(this.value);
                        }
                    }
                });
                if (status.length>0 && ids.length>0) {  // 同时勾选了可操作和不可操作的
                    show_message(status.join('/')
                        +'号工单不会被受理,需[新的]状态,是否继续提交?', {
                        type: 'confirm',
                        callback: function () {
                            // 对话框点击"确定"时执行
                            change_status(ids, '{% url "task_accept" %}');
                        }
                    });
                }else if (status.length>0 && ids.length<1) { // 勾选的全部是不可操作的
                    show_message(status.join("/") +'号工单不会被受理,需[新的]状态.');
                } else {    // 什么都没勾选
                    // 直接执行
                    change_status(ids, '{% url "task_accept" %}');
                }
            });

            // 已解决
            $('#resolved').click(function () {
                var ids = new Array();
                var status = new Array();
                $('input#id').each(function () {
                    if ($(this).is(':checked')) {
                        if ($(this).attr('status') == 1) { // 已受理工单1可以被解决
                            ids.push(this.value);
                        } else {
                            status.push(this.value);
                        }
                    }
                });

                if (status.length>0 && ids.length>0) {  // 同时勾选了可操作和不可操作的
                    show_message(status.join('/')
                        +'号工单不会被记为已解决,需[已受理]状态,是否继续提交?', {
                        type: 'confirm',
                        callback: function () {
                            // 对话框点击"确定"时执行
                            change_status(ids, '{% url "task_resolved" %}');
                        }
                    });
                }else if (status.length>0 && ids.length<1) { // 勾选的全部是不可操作的
                    show_message(status.join("/") +'号工单不会被记为已解决,需[已受理]状态.');
                } else {    // 什么都没勾选
                    // 直接执行
                    change_status(ids, '{% url "task_resolved" %}');
                }
            });

        });
    </script>
{% endblock js_bottom_other %}